<template>
  <view class="container" :style="appThemeStyle">
    <view class="shop-wrap" v-if="!businessType" @click="showShopPopup = true">
      <view class="name oneline-hide">{{ shopInfo.shopName || '' }}</view>
      <view class="iconfont icon-search"></view>
    </view>
    <view class="cell-group">
      <view class="cell-item" @click="toChannel">
        <view class="label">渠道管理</view>
        <view class="value">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      <view class="cell-item" @click="showPopup = true">
        <view class="label">智能拣货</view>
        <view class="value">
          <text class="mode">{{ PickModeEnum.data.find(item => item.value === pickMode)?.name }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      <view class="cell-item" @click="showMethodPopup = true">
        <view class="label">设置拣货方式</view>
        <view class="value">
          <text class="mode">{{ pickMethods[methodIndex] }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    <!--智能拣货-->
    <u-popup
      v-model="showPopup"
      mode="bottom"
      border-radius="20"
      :safe-area-inset-bottom="true"
      :closeable="true"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <view class="popup-content">
        <view class="page-title">开启智能拣货</view>
        <view class="list">
          <view class="item" v-for="(item, index) in PickModeEnum.data" :key="index" :class="{ active: item.value === pickMode }"
            @click="selectMode(item)">
            <text class="name">{{ item.name }}</text>
            <text class="iconfont selected" v-if="item.value === pickMode">&#xe6ad;</text>
          </view>
        </view>
      </view>
    </u-popup>
    <!--拣货方式-->
    <u-popup
      v-model="showMethodPopup"
      mode="bottom"
      border-radius="20"
      :safe-area-inset-bottom="true"
      :closeable="true"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <view class="popup-content">
        <view class="page-title">设置拣货方式</view>
        <view class="list">
          <view class="item" v-for="(item, index) in pickMethods" :key="index" :class="{ active: index === methodIndex }"
            @click="selectMethod(index)">
            <text class="name">{{ item }}</text>
            <text class="iconfont selected" v-if="index === methodIndex">&#xe6ad;</text>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 门店列表 -->
    <u-popup
      v-model="showShopPopup"
      mode="bottom"
      border-radius="20"
      :safe-area-inset-bottom="true"
      :closeable="true"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <view class="popup-content">
        <view class="page-title">选择门店</view>
        <u-search
          shape="square"
          placeholder="请输入门店名称"
          v-model="searchValue"
          :action-style="{
            color: appTheme.mainBg
          }"
          :show-action="true"
          action-text="取消"
          :animation="true"
          @search="onSearch"
          @custom="onClear"
          @clear="onSearch"
        ></u-search>
        <scroll-view class="list m-top20" :scroll-y="true">
          <view
            class="item"
            v-for="(item, index) in shopList"
            :key="index"
            :class="{active: index === selectedIndex}"
            @click="selectItem(item, index)"
          >
            <text class="name">{{ item.shopName }}</text>
            <text class="iconfont selected" v-if="index === selectedIndex">&#xe6ad;</text>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import * as SettingApi from "@/api/setting"
import { PICK_METHOD } from "@/store/mutation-types"
import storage from '@/utils/storage'
import store from '@/store'
import StoreModel from '@/common/model/Store'
import PickModeEnum from '@/common/enum/setting/pickMode'

export default {
  name: "index",
  data() {
    return {
      PickModeEnum,
      showPopup: false,
      pickMode: 0, //（0：不开启，1.派单模式，2.抢单模式）
      showMethodPopup: false,
      pickMethods: ['扫码拣货', '点击拣货'],
      methodIndex: 0,
      shopList: [],
      showShopPopup: false,
      searchValue: '',
      selectedIndex: 0,
      shopInfo: {}
    }
  },
  computed: {
    store() {
      return store.getters.store
    },
    pickConfig() {
      return store.getters.pickConfig
    },
    shops() {
      return store.getters.shops
    },
    businessType() {
      return store.getters.businessType
    }
  },
  onLoad() {
    this.shopList = this.shops.filter(item => item.id !== '0')
    if (!this.businessType) this.shopInfo = this.shopList[this.selectedIndex]
    this.getPickConfig()
  },
  methods: {
    async getPickConfig() {
      const shopId = !this.businessType ? this.shopInfo.id : this.store.id
      const { data: config } = await SettingApi.getShopsPickConfig(shopId)
      config.pickMethod = storage.get(PICK_METHOD) || 0
      store.commit('SET_PICK_CONFIG', config)
      this.pickMode = config.pickMode
      this.methodIndex = config.pickMethod
    },
    toChannel() {
      this.$navTo('orderpages/setting/channel', { shopId: this.shopInfo.id })
    },
    selectMode(item) {
      this.pickMode = item.value
      this.showPopup = false
      this.updatePickConfig()
    },
    selectMethod(index) {
      this.methodIndex = index
      this.showMethodPopup = false
      storage.set(PICK_METHOD, this.methodIndex)
      store.commit('SET_PICK_CONFIG', { ...this.pickConfig, pickMethod: this.methodIndex })
    },
    async updatePickConfig() {
      const shopId = !this.businessType ? this.shopInfo.id : this.store.id
      const params = {
        shopId,
        pickMode: this.pickMode
      }
      let data = {}
      try {
        data = await SettingApi.updateShopsPick(params)
      } catch (err) {
      }
      StoreModel.logs({
        status: data.code === 0 ? 1 : 0,
        operationType: 'pick_setting_update',
        remarks: '门店当前配置'
      })
      await this.getPickConfig()
    },
    onSearch() {
      this.shopList = this.shops.filter(item => item.id !== '0')
      if (this.searchValue) {
        this.shopList = this.shopList.filter(item => item?.shopName.includes(this.searchValue))
      }
    },
    onClear() {
      this.searchValue = ''
      this.onSearch()
    },
    selectItem(item, index) {
      this.selectedIndex = index
      this.shopInfo = item
      this.getPickConfig()
      this.showShopPopup = false
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 24rpx;

  .shop-wrap {
    background: #fff;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    margin-bottom: 48rpx;

    .name {
      flex: 1;
    }

    .iconfont {
      width: 40rpx;
      font-size: 30rpx;
      margin-left: 30rpx;
    }
  }

  .cell-group {
    padding: 16rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;

    .cell-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border: none;
      }

      .label {
        font-size: 28rpx;
        color: #333333;
      }

      .value {
        display: flex;
        align-items: center;

        .mode {
          color: $main-bg;
          margin-right: 16rpx;
        }

        .iconfont {
          color: #666;
          font-size: 40rpx;
        }
      }
    }
  }

  .popup-content {
    padding: 24rpx;

    .page-title {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .list {
      min-height: 30vh;
      max-height: 65vh;

      .item {
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 16rpx;
        border: 1rpx solid var(--eeeeee, #EEE);
        padding: 24rpx;
        font-size: 26rpx;

        &.active {
          border: 1rpx solid #2D71FD;

          .name {
            font-weight: bold;
          }
        }

        .selected {
          color: #2D71FD;
          font-size: 40rpx;
        }
      }
    }
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
}
</style>
